---
slug: /
description: JavaScript SVG parser and renderer on Canvas
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Logo from '@site/static/img/logo.svg';

# canvg

<Logo className='logo' width={150} height={150} />

[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[npm]: https://img.shields.io/npm/v/canvg.svg
[npm-url]: https://npmjs.com/package/canvg

[deps]: https://img.shields.io/librariesio/release/npm/canvg
[deps-url]: https://libraries.io/npm/canvg/tree

[build]: https://img.shields.io/github/actions/workflow/status/canvg/canvg/ci.yml?branch=master
[build-url]: https://github.com/canvg/canvg/actions

[coverage]: https://img.shields.io/codecov/c/github/canvg/canvg.svg
[coverage-url]: https://app.codecov.io/gh/canvg/canvg

JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders the result on Canvas. It also can be used to rasterize SVG images.

## Quickstart

Install this library using your favorite package manager:

<Tabs>
  <TabItem value="pnpm" default>

  ```bash
  pnpm add canvg
  ```

  </TabItem>
  <TabItem value="yarn">

  ```bash
  yarn add canvg
  ```

  </TabItem>
  <TabItem value="npm">

  ```bash
  npm install --save canvg
  ```

  </TabItem>
</Tabs>

Then, just import `Canvg` and use it:

```js
import { Canvg } from 'canvg';

let v = null;

window.onload = async () => {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(ctx, './svgs/1.svg');

  // Start SVG rendering with animations and mouse handling.
  v.start();
};

window.onbeforeunload = () => {
  v.stop();
};
```

## Examples

Please see [live examples](/examples).

## Getting Help

Need help? Ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/canvg).

If you've encountered an issue, please [file it on GitHub](https://github.com/canvg/canvg/issues).
